<template>
  <!-- 商户列表 -->
  <div class="merchantList">
    <div class="list-item" v-for="(item,index) in storeList" :key="index">
      <div class="checkbox" v-if="isEdit">
        <img v-if="item.isChecked" :src="imgOss+'/checked.png'" alt @click="changeChecked(item)" />
        <img v-if="!item.isChecked" :src="imgOss+'/check.png'" alt @click="changeChecked(item)" />
      </div>
      <div class="main" @click="toDetail(item)">
        <div class="maintop">
          <!-- 商户图片 -->
          <div class="merchantpic">
            <img :src="imgUrl+item.shop_logo" alt />
            <!-- 下架 -->
            <img v-if="item.is_on==0" class="xiajia" :src="imgOss+'/xiajia.png'" alt />
          </div>
          <!-- 商户信息 -->
          <div class="merchantinfo">
            <div class="title">{{item.name}}</div>
            <div class="location">
              <div class="tipbox">
                <span class="tip">{{item.category_name}}</span>
                <span v-if="item.city&&item.district">{{item.city}}/{{item.district}}</span>
              </div>
              <div class="distance">{{item.distance}}km</div>
            </div>
            <div class="card_rate">
              <img class="card_star" v-if="item.grade<'0.5'" :src="imgOss+'/collection/star_no.png'" alt/>
              <img class="card_star" v-if="item.grade>='0.5'&&item.grade<'1.0'" :src="imgOss+'/collection/star_ban.png'" alt/>
              <img class="card_star" v-if="item.grade>='1.0'" :src="imgOss+'/collection/star.png'" alt/>
              <img class="card_star" v-if="item.grade<'1.5'" :src="imgOss+'/collection/star_no.png'" alt/>
              <img class="card_star" v-if="item.grade>='1.5'&&item.grade<'2.0'" :src="imgOss+'/collection/star_ban.png'" alt/>
              <img class="card_star" v-if="item.grade>='2.0'" :src="imgOss+'/collection/star.png'" alt/>
              <img class="card_star" v-if="item.grade<'2.5'" :src="imgOss+'/collection/star_no.png'" alt/>
              <img class="card_star" v-if="item.grade>='2.5'&&item.grade<'3.0'" :src="imgOss+'/collection/star_ban.png'" alt/>
              <img class="card_star" v-if="item.grade>='3.0'" :src="imgOss+'/collection/star.png'" alt/>
              <img class="card_star" v-if="item.grade<'3.5'" :src="imgOss+'/collection/star_no.png'" alt/>
              <img class="card_star" v-if="item.grade>='3.5'&&item.grade<'4.0'" :src="imgOss+'/collection/star_ban.png'" alt/>
              <img class="card_star" v-if="item.grade>='4.0'" :src="imgOss+'/collection/star.png'" alt/>
              <img class="card_star" v-if="item.grade<'4.5'" :src="imgOss+'/collection/star_no.png'" alt/>
              <img class="card_star" v-if="item.grade>='4.5'&&item.grade<'5.0'" :src="imgOss+'/collection/star_ban.png'" alt/>
              <img class="card_star" v-if="item.grade>='5.0'" :src="imgOss+'/collection/star.png'" alt/>
            <p class="card_score">{{item.grade}}分</p>
            </div>
            <!-- 卡 -->
            <div class="activebox" v-if="item.card">
              <img :src="imgUrl+'h5_images/lifebeauty/plusnobuy/ka.png'" alt="">
              <div class="activename">{{item.card.name}}</div>
              <div class="activesales">已售{{item.card.sale_num}}</div>
            </div>
            <div class="activebox" v-if="item.service">
              <img :src="imgUrl+'h5_images/lifebeauty/plusnobuy/fu.png'" alt="">
              <div class="activename">{{item.service.service_name}}</div>
              <div class="activesales">已售{{item.service.sale_num}}</div>
            </div>
          </div>
        </div>
        <div class="mainbottom">
          <img :src="imgOss+'/collection/plus.png'" alt="">
          <span>{{item.plus_title}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  components: {},
  data() {
    return {
      imgUrl: common.image_response,
      imgOss: common.image_resource,
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/"
    };
  },
  props: {
    isEdit: false,
    storeList: []
  },
  watch: {
    storeList(newval, oldval) {
      this.storeList = newval;
    }
  },
  methods: {
    changeChecked(item) {
      item.isChecked = !item.isChecked;
      this.$emit("storeClick", this.storeList);
    },
    // 商户详情
    toDetail(item) {
      if (item.is_on == 0) {
        return;
      }
      let router = encodeURIComponent(`shop?id=${item.shop_id}`);
      wx.navigateTo({ url: `/pages/life_beauty/main?router=${router}` });
    }
  }
};
</script>
<style lang="less" scoped>
.merchantList {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.list-item {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.checkbox {
  margin-right: 16px;
  img {
    width: 20px;
    height: 20px;
  }
}
.main {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 6px 0px rgba(240, 240, 240, 1);
  border-radius: 5px;
  box-sizing: border-box;
  .maintop{
    padding: 10px;
    display: flex;
    .merchantpic {
      width: 100px;
      height: 100px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 5px;
      }
      .xiajia {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
        z-index: 11;
      }
    }
    .merchantinfo {
      flex:7;
      margin-left: 10px;
      box-sizing: border-box;
      overflow: hidden;
      .title {
        width: 100%;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1d2023;
        margin-bottom: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .location {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #606972;
        display: flex;
        justify-content: space-between;
        margin-bottom: 3px;
        .tipbox {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          .tip {
            margin-right: 10px;
          }
        }
        .distance {
          color: #666666;
          .locate {
            width: 15px;
            height: 13px;
            vertical-align: -2px;
          }
        }
      }
      .card_rate {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        .card_star {
          width: 11px;
          height: 12px;
          margin-right: 5px;
        }
        .card_score {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ff8269;
          margin-left: 6px;
        }
      }
      .activebox{
        display: flex;
        align-items: center;
        justify-content: space-between;
        img{
          width: 13px;
          height: 13px;
          vertical-align: -2px;
        }
        .activename{
          width: 64%;
          font-size: 12px;
          color: #1D2023;
          margin-left: 3px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .activesales{
          text-align: right;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #78828c;
          line-height: 16px;
        }
      }
    }
  }
  .mainbottom{
    background:rgba(255,241,231,0.45);
    border-radius:0px 0px 5px 5px;
    padding: 8px 10px;
    box-sizing: border-box;
    img{
      width:29px;
      height:16px;
      vertical-align: -4px;
    }
    span{
      margin-left: 4px;
      font-size:12px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(102,102,102,1);
      line-height:16px;
    }
  }
}
</style>